<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#202536' }"
            :row-style="{ color: '#5E617D' }" empty-text="暂无记录">
            <template v-for="(i, index) in tableHeader" :key="index">
                <template v-if="i.prop === 'salesScenario'">
                    <el-table-column prop="salesScenario" label="类型">
                        <template v-slot="scope">
                            <div class="flex flex-ai-c">
                                <img v-if="scope.row.salesScenario === 2" src="@/assets/icon/icon-add-seat.png" alt="" class="icon-img">
                                <img v-if="scope.row.salesScenario === 0 || scope.row.salesScenario === 4" src="@/assets/icon/icon-open-account.png" alt="" class="icon-img">
                                <img v-if="scope.row.salesScenario === 3" src="@/assets/icon/icon-recharge.png" alt="" class="icon-img">
                                <img v-if="scope.row.salesScenario === 1" src="@/assets/icon/icon-refill.png" alt="" class="icon-img">
                                <span class="mg-l-5">{{ typeMap(scope.row.salesScenario) }}</span>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template v-else-if="i.prop === 'status'">
                    <el-table-column prop="status" label="状态">
                        <template v-slot="scope">
                            <span class="fc-primary" v-show="scope.row.status === 0">
                                待审核
                            </span>
                            <span class="fc-success" v-show="scope.row.status === 1">
                                支付成功
                            </span>
                            <span class="fc-warning" v-show="scope.row.status === 2">
                                已驳回
                            </span>
                        </template>
                    </el-table-column>
                </template>
                <template v-else-if="i.prop === 'payMoney'">
                    <el-table-column prop="payMoney" label="订单金额">
                        <template v-slot="scope">
                            <span class="fc-warning bold">
                                ¥{{ scope.row.payMoney }}
                            </span>
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column :prop="i.prop" :label="i.label" />
                </template>
            </template>
        </el-table>
        <div class="pagination-box">
            <el-pagination class="pagination" v-model:currentPage="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep } from 'lodash';
export default defineComponent({
    props: {
        tableData: {
            type: Array,
            default() {
                return []
            }
        },
        pageInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            tableHeader: [
                {
                    prop: 'salesScenario',
                    label: '类型'
                },
                {
                    prop: 'buySeatCount',
                    label: '席位数'
                },
                {
                    prop: 'updateTime',
                    label: '生效时间'
                },
                {
                    prop: 'dueDate',
                    label: '过期时间'
                },
                {
                    prop: 'status',
                    label: '状态'
                },
                {
                    prop: 'payMoney',
                    label: '订单金额'
                },
            ],
            pages: {} as any
        }
    },
    computed: {
        typeMap() {
            return (type: number) => {
                console.log(2121, type);
                // 0：首签，1：续签,2:席位购买，3:续费+席位购买,4首签+席位购买
                const map = {
                    0: '首签',
                    1: '续签',
                    2: '席位购买',
                    3: '续费+席位购买',
                    4: '首签+席位购买'
                }
                return (map as any)[type]
            }
        }
    },
    watch: {
        pageInfo: {
            handler(newval) {
                this.pages = cloneDeep(newval)
            },
            deep: true,
            immediate: true
        },
        pages: {
            handler(newval) {
                this.$emit('update:pageInfo', newval)
            },
            deep: true
        }
    },
    methods: {
        handleSizeChange(ev: number) {
            this.pages.pageSize = ev
            this.$emit('doSearch')
        },
        handleCurrentChange(ev: number) {
            this.pages.pageNum = ev
            this.$emit('doSearch')
        }
    }
})
</script>
<style lang="stylus" scoped>
.icon-img
    width 24px
    height 24px
    border-radius 12px
.pagination-box
    text-align right
    margin-top 20px
    padding-bottom 20px

</style>